import { useState } from "react";
import "./Instructions.css";

export const Instructions = () => {
  const [isVisible, setIsVisible] = useState(true);

  const handleClose = () => {
    setIsVisible(false);
  };

  if (!isVisible) return null;

  return (
    <div className="instructions-overlay">
      <div className="instructions-container">
        <div className="instructions-content">
          <h2>迷你奶块</h2>
          <p>欢迎来到 迷你奶块 ！以下是游戏操作说明：</p>
          
          <h3>基本操作：</h3>
          <ul>
            <li>W A S D - 移动角色</li>
            <li>空格键 - 跳跃</li>
            <li>鼠标 - 视角移动</li>
            <li>鼠标左键 - 放置方块</li>
            <li>鼠标右键 - 删除方块</li>
            <li>数字 1-5 - 选择不同材质</li>
            <li>P 键 - 清除所有方块</li>
            <li>T 键 - 切换视角</li>
          </ul>
          
          <p>探索这个世界，创建和破坏方块，发挥你的创造力！</p>
        </div>
        <button className="close-button" onClick={handleClose}>
          关闭
        </button>
      </div>
    </div>
  );
}; 